import { Card, Row, Col, Popover, Image } from 'antd';
import React, { useState, useEffect } from 'react';
import {
    DynamicEcharts,
    PrimaryEcharts,
    CategoryEcharts
} from './echarts';
import {
    LinkOutlined
} from '@ant-design/icons';
import api from '@/api/apiList'
import { YzhSkeleton, YzhEmpty } from '@com'
import { storage } from '@/utils/storage'
import { apps } from '@/micro-app'
import errorImage from '@/assets/images/placeholder.png'
import { hasPermission, permissionCodes as pCodes } from '@/routes/permission'
const { Meta } = Card;
const HomePage = (props) => {
    const [loading, setLoading] = useState(true)
    const [state, setState] = useState({
        appList: []
    })
    useEffect(() => {
        const getAppData = async (params) => {
            try {
                setLoading(true)
                // let res = await api.app.list({ ...params, pageSize: 1000 })
                let res = await api.app.home({ ...params, pageSize: 1000 })
                let appList = res && res.result !== null ? res.result.records || res.result : []
                appList = appList.map(el => {
                    let temp = {
                        ...el
                    }
                    // 处理微应用主应用内访问
                    Object.keys(apps).map(key => {
                        //  && el.appLink.includes(key)
                        if (el.appCode.includes(key) && process.env.REACT_APP_ENV !== 'production') {
                            temp.activeKey = '/' + key
                        }
                    })
                    return temp
                })
                // console.log(appList, Object.keys(apps), 'appList');
                setState({
                    appList
                })
                setLoading(false)
            } catch (error) {
                setLoading(false)
                console.log(error);
            }
        }
        getAppData()
    }, []);
    const getFullLink = (appLink) => {
        appLink += '?token=' + storage.get('token', 'cookie')
        appLink += '&userId=' + storage.get('userInfo').userId
        // appLink += '&appCode=' + pCodes.appCode
        return appLink
    }
    return (
        <div className="home-page" style={{ border: 0, background: '#f8f8f8' }}>
            <Card className="card-board" style={{ borderBottom: 0 }}>
                <Row gutter={[16, 16]}>
                    <Col xxl={8} xl={8} lg={12} md={12} xs={12} sm={24}>
                        {!loading ? <Card title="实时访问数据" bordered={true}>
                            <DynamicEcharts />
                        </Card> : <YzhSkeleton />}
                    </Col>
                    <Col xxl={8} xl={8} lg={12} md={12} xs={12} sm={24}>
                        {!loading ? <Card title="历史浏览量" bordered={true}>
                            <PrimaryEcharts />
                        </Card> : <YzhSkeleton />}
                    </Col>
                    <Col xxl={8} xl={8} lg={12} md={12} xs={12} sm={24}>
                        {!loading ? <Card title="用户活跃统计" bordered={true}>
                            <CategoryEcharts />
                        </Card> : <YzhSkeleton />}
                    </Col>
                </Row>
            </Card>
            {/* {<Card
                className="card-board"
                style={{ border: 0, background: '#f8f8f8' }}
                bodyStyle={{ padding: '5px 0 20px 0' }}>
                {<Row
                    gutter={[0, 30]}
                    justify={'space-between'}
                    style={{ cursor: 'default' }}
                    className={state.appList.length && 'grid-list'}>
                    {
                        !loading ? state.appList.length ? state.appList.map(item => {
                            return <Col className={state.appList.length && 'grid-list-item'} key={item.id} flex={'auto'}>
                                <div onClick={(e) => {
                                    e.preventDefault()
                                    window.open(getFullLink(item.appLink), '_blank')
                                }}>
                                    <Card
                                        hoverable
                                        style={{
                                            width: 200,
                                            borderRadius: 8,
                                            // boxShadow: '0 5px 15px #eee',
                                            border: 'none',
                                            background: '#fff',
                                            overflow: 'hidden',
                                            cursor: 'pointer'
                                        }}
                                        bodyStyle={{
                                            paddingTop: 0,
                                        }}
                                        bordered={true}
                                        cover={
                                            <Image
                                                style={{
                                                    // width: 100,
                                                    // height: 100,
                                                    minHeight: 200,
                                                    // borderBottom: '1px solid #d9d9d9',
                                                    padding: 50
                                                }}
                                                placeholder={!item.appImg}
                                                preview={false}
                                                alt={item.appName}
                                                src={item.appImg}
                                                title={item.appName}
                                                fallback={errorImage}
                                            />
                                        }>
                                        <Meta
                                            className="ellipsis tc"
                                            title={item.appName}
                                        // description={item.appCode}
                                        />
                                        <Popover
                                            placement="bottomRight"
                                            content={'当前页签访问（实验性）'}>
                                            {item.activeKey && <div
                                                className={'tr open-btn'}
                                                style={{
                                                    position: 'absolute',
                                                    top: 10,
                                                    right: 15
                                                }}
                                                onClick={(e) => {
                                                    e.stopPropagation()
                                                    props.addTabs({ activeKey: item.activeKey, title: item.appName || '商品中心' })
                                                    props.reload()
                                                }}>
                                                <LinkOutlined style={{ color: '#999' }} />
                                            </div>}
                                        </Popover>
                                    </Card>
                                </div>
                            </Col>
                        }) : <Col span={24}><YzhEmpty height={200} width={200} style={{ padding: '200px 0' }} /></Col> : <Col span={24}><YzhSkeleton /></Col>
                    }
                </Row>}
            </Card>} */}
        </div>
    )
};
export default HomePage;